# 三种错误类型

Nuxt3 是全栈框架，代码可能运行在客户端和服务端，因此错误类型可分为以下三种情况：

• Vue 渲染过程中的错误（包括客户端和服务端）；
• Nitro 引擎内部运行时错误；
• 服务器和客户端启动错误（包括客户端和服务端）。

# Vue 渲染过程中的错误

视图层是通过 Vue 实现的，因此不管是 SSR，还是 SPA 在渲染过程中的错误，都可以在 Vue 层面处理，当然也可以等错误传播到顶层时通过 Nuxt 提供的生命周期钩子处理。

# 利用 Vue 选项处理错误

首先看一下 Vue 层面的处理方法：onErrorCaptured，这是 Vue 实例提供的全局配置选项，可以这样配置：

ini
复制代码app.config.errorHandler = (error, context) => {}

现在的问题是如何获得 Vue 实例，方法是通过 Nuxt 提供的插件机制获取：

javascript
复制代码export default defineNuxtPlugin((nuxtApp) => {
  // 通过 nuxtApp.vueApp 获取 Vue 实例
  nuxtApp.vueApp.config.errorHandler = (error, context) => {
    // ...
  }
})

关于 Nuxt 插件机制，我们在后续章节会详细介绍

下面我们在个人博客范例中添加错误捕获功能，创建 ~/plugins/error.ts：

javascript
复制代码export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (..._args) => {
    console.log('vue error handler')
  }
})

测试效果：这里访问了一个不存在的变量：

# 利用 Nuxt 钩子处理错误

还有一种处理方式，是利用 Nuxt 层级的钩子捕获来自 Vue 传播上来的错误。可用的钩子有两个：

• app:error：整个应用层面的错误捕获；
• vue:error：仅 Vue 层面的错误捕获。

添加两个钩子app:error, vue:error，plugins/error.ts。

javascript
复制代码export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook(